<template>
  <div>
    <nav-bar title="出库记录"></nav-bar>
    <div class="maxinBox" v-if="materialDetails">
      <van-row>
        <van-col :span="24" class="title">
          <div>
            材料信息
          </div>
        </van-col>
      </van-row>
      <van-cell title="材料名称" :value="materialDetails.name || '--'"/>
      <van-cell title="材料编号" :value="materialDetails.num || '--'"/>
      <van-cell title="型号规格" :value="materialDetails.model || '--'"/>
      <van-cell title="品牌" :value="materialDetails.brand || '--'"/>
      <van-row>
        <van-col :span="24" class="title">
          <div>
            出库记录
          </div>
        </van-col>
      </van-row>
      <van-row class="outBoundBox backgroundfff" style="padding: 0.9375rem;" v-for="(item, index) in outboundList" :key="index">
       <van-col :span="4">
          <img v-if="item.img" style="width:90%" :src="item.img" @click="bigImg(item.img)" alt="">
        </van-col>
        <van-col :span="20" class="fontSize16">
          <div>出库数量: {{item.num}}</div>
          <div>出库日期: {{item.date}}</div>
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        outboundList: [
          {
            img: 'https://rueinet-intelligent.oss-cn-hangzhou.aliyuncs.com/2020/11/26/829ce1b62c4e4aec91705a342534c158.jpg',
            num: '300',
            date: '2020-10-23'
          },
          {
            img: 'https://rueinet-intelligent.oss-cn-hangzhou.aliyuncs.com/2020/11/26/829ce1b62c4e4aec91705a342534c158.jpg',
            num: '300',
            date: '2020-10-23'
          },
          {
            img: 'https://rueinet-intelligent.oss-cn-hangzhou.aliyuncs.com/2020/11/26/829ce1b62c4e4aec91705a342534c158.jpg',
            num: '300',
            date: '2020-10-23'
          },
          {
            img: 'https://rueinet-intelligent.oss-cn-hangzhou.aliyuncs.com/2020/11/26/829ce1b62c4e4aec91705a342534c158.jpg',
            num: '300',
            date: '2020-10-23'
          }
        ],
        materialDetails: {
          name: '一期工地建筑水泥',
          num: 'QR34642134P',
          model: '325#',
          brand: '永固',
        }
      }
    },
    methods: {
      outbound() {
        this.$router.push({
          name: 'MaterialOutbound'
        })
      },
      outboundHistory() {
        this.$router.push({
          name: 'MaterialOutboundHistory'
        })
      },
    },
    mounted() {

    }
  }
</script>
<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
  .outBoundBox {
    border-bottom: 0.0625rem solid #E5E5E5;
  }
</style>
